<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            color: brown;
        }
    </style>
</head>

<body>
    <input type="text">
    <ul>
        <li></li>
    </ul>
</body>
<script>
    function $(name) {
        return document.querySelector(name);
    }
    function _(name) {
        return document.querySelectorAll(name);
    }
    let date = ["就会加快", "摄氏度", "的方式三", "第三个", "加规划图", "公司的",]
    let sss = []
    $("input").oninput = function () {
        sss = []
        if ($("input").value.length != 0) {

            date.forEach(function (v) {

                if (v.includes($("input").value)) {
                    let ddfg = v.replaceAll($("input").value, `<span>${$("input").value}</span>`)
                    sss.push(ddfg)
                }else{
                    // $("ul").innerHTML = ""
                }
                
            })
            dds();
        } else {
            $("ul").innerHTML = ""
        }

    }

    function dds() {
        sss.forEach(function (c) {
            $("ul").innerHTML = ""
            $("ul").innerHTML += `<li>${c}</li>`;
        })
    }
</script>

</html>